/**
 * Created with BlueStream
 * Date: 13. 6. 3
 * Time: 오후 12:26
 * Writer: 강석민
 */

var fishX;
var fishY;

var panelDIV;
var countX;
var countY;
var img_1DIV;
var imgTag;

var limitX;
var movementX = 1;

var limitY;
var movementY = 1;

var timerID = 0;

window.onload = function () {

    this.init();

    this.initEventListener();
}

function init() {
    panelDIV = document.getElementById("panel");
    countX = document.getElementById("countX");
    countY = document.getElementById("countY");
    img_1DIV = document.getElementById("img_1");
//    img_1DIV.style.border = "red solid 1px";
    imgTag = img_1DIV.getElementsByTagName("img")[0];
    fishX = img_1DIV.offsetLeft;
    fishY = img_1DIV.offsetHeight;

    img_1DIV.style.left = fishX + "px";

    limitX = panelDIV.clientWidth - img_1DIV.offsetWidth;
    limitY = panelDIV.clientHeight - img_1DIV.offsetHeight;


}

function initEventListener() {
    document.getElementById("btn_start").addEventListener("click", function () {
        startMove();
    }, false);

    document.getElementById("btn_stop").addEventListener("click", function () {
        stopMove();
    }, false);
}

function startMove() {
    timerID = setInterval(moveFish, 1);
}

function stopMove() {
    if( timerID != 0 ){
        clearInterval(timerID);
    }
}

function moveFish() {
    fishX += 1*movementX;
    fishY += 1*movementY;


    if( fishX >= limitX ){
        fishX = limitX;
        movementX *= -1;
        imgTag.src = "./img/fish2.png";
    }

    if( fishX <= 0 ){
        fishX = 0;
        movementX *= -1;
        imgTag.src = "./img/fish.png";
    }

    if( fishY >= limitY ){
        fishY = limitY;
        movementY *= -1;
    }

    if( fishY <= 0 ){
        fishY = 0;
        movementY *= -1;
    }

    countX.innerText = fishX.toString() + " / "+ limitX.toString();
    countY.innerText = fishY.toString() + " / "+ limitY.toString();

    img_1DIV.style.left = fishX + "px";
    img_1DIV.style.top = fishY + "px";

}
